<template>
	<view>
		<view class="thefirst">
			<view v-for="(item,index) in this.bigsp" :key="item.index">
				<view class="imgbox" @click="viedo(item,index)">
					<view class="bgc"></view>
					<image class="bigimg" :src="item.video.imgUrl"></image>
					<image class="bfbutt" src="../../static/playCircle.png"></image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bigsp:[],
				page: 0,
			};
		},
		
		onLoad() {
			this.getstart();
			
		},
		
		onReachBottom() {
			this.getbefort();
		},
		
		computed: {
			 nexpage: function () {
			      return this.page * 10 + 10;
			    },
		},
		
		methods:{
			getstart:function() {
				uni.showToast({
					title: "加载中",
					icon: "loading"
				})
				uni.request({
					url:"https://apis.netstart.cn/maoyan/video/0",
					success: (res) => {
						this.bigsp = res.data.data.feeds
					},
					complete: () => {
						uni.hideToast()
					}
				})
			},
			
			getbefort:function(){
				if (this.bigsp.length) {
					uni.showToast({
						title: "加载中",
						icon: "loading"
					})
					uni.request({
						url:"https://apis.netstart.cn/maoyan/video/" + this.nexpage,
						success: (res) => {
							this.page++;
							res.data.data.feeds.map((res) => {
							              this.bigsp.push(res);
							            });
						},
						complete: () => {
							uni.hideToast()
						}
					})
				}
			},
			
			viedo(item,index){
				console.log(item)
				console.log(index)
				uni.navigateTo({
					url:'../initviedo/initviedo?id='+index
				})
			}
		},
		
	}
</script>

<style lang="less">
	.imgbox{
		width: 100%;
		position: relative;
		.bgc{
			width: 100%;
			height: 436rpx;
			z-index: 1;
			background:rgba(0, 0, 0, 0.5);
			position: absolute;
		}
		.bigimg{
			width: 100%;
			height: 436rpx;
		}
		.bfbutt{
			z-index: 2;
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translateY(-50%);
			transform: translateX(-50%);
		}
		.title{
			z-index: 2;
			position: absolute;
			top: 10rpx;
			left: 20rpx;
			color: white;
			font-weight: bold;
			font-size: 35rpx;
		}
	}
		
	

</style>
